<template>
    <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>接单助手</span>
            </div>
        </div>
        <div class="t_c">
            <div class="fon_22 lh36 mar_b30">微信接单助手</div>
            <div class="color_9 mar_b30">关注接单小助手微信服务号后，新订单将通过服务号提醒</div>
            <div class="mar_b30 curs color-green" @click="dialogVisible = true">已绑定<span>{{count}}</span> 个微信
                <Icon type="ios-arrow-forward"/>
            </div>
            <div class="mar_b30 curs color-1989FA" @click="dialogFormVisible = true">去添加
                <Icon type="ios-arrow-forward"/>
            </div>
            <div class="helper rel mar_t40">
                <div class="hr"></div>
                <p class="hrtext ab ba_f">如何绑定微信接单小助手</p></div>
            <div class="mar_t40 flex-x-center">
                <div class="step">
                    <img class="wid bor_de" style="height:140px"
                         :src="icon"/>
                    <p class="mar_t10 color_6 lh16" style="width:143px">1. 微信扫描下方二维码<br>关注服务号</p>
                </div>
                <div class="mar_lr20">
                    <Icon type="ios-arrow-forward" class="fon_22 color_9 mar_t60"/>
                </div>
                <div class="step">
                    <img class="wid bor_de"
                         src="../../../assets/img/order/msg.png"/>
                    <p class="mar_t10 color_6 lh16">2. 关注服务号后<br>联系管理员获取您的openID,绑定即可</p>
                </div>
            </div>
        </div>
        <el-dialog
                title="绑定列表"
                :visible.sync="dialogVisible"
                width="30%"
                :close-on-click-modal="false"
        >
            <div class="flex flex-center mar_b10" v-for="item in list" :key="item.id">
                <div class="icon mar_r20 bor_rad5">
                    <img class="wid" :src="item.portrait"/>
                </div>
                <div class="">
                    <div>{{item.userName}}</div>
                    <div class="fon_12 color_9">{{item.createdAt}} 绑定</div>
                </div>
                <!--                <el-button type="danger" size="medium" plain class="mar_l30" @click="unBundOperation(item.id)">解绑</el-button>-->
                <el-button size="medium" class="mar_l30" @click="unBundOperation(item.id)">解绑</el-button>
            </div>
            <!--            <span slot="footer" class="dialog-footer">-->
            <!--                <el-button @click="dialogVisible = false">取 消</el-button>-->
            <!--                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
            <!--            </span>-->
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="dialogFormVisible"
                width="30%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="微信openID">
                    <el-input v-model.trim="form.openId" autocomplete="off" placeholder="请输入提醒人的微信openID"></el-input>
                    <div class="yb_margin lh16">绑定后，请不要取消关注接单公众号，否则会收不到订单提醒</div>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">立即绑定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import index from '@/api/index';
    import {bundList,addBund,} from "@/api/order"
    import {mapState} from "vuex";
    export default {
        data() {
            return {
                form:{
                    openId:'',
                },
                dialogVisible: false,
                dialogFormVisible:false,
                icon:'',
                list:[],
                count:'',

            }
        },
        created(){
            this.getBundList()
        },
        computed:{
            ...mapState(['storeId'])
        },
        methods: {
            async getBundList(){
                const {data,count}=await bundList({storeId:this.storeId});
                this.icon=data.icon;
                this.list=data.list;
                this.count=count;

            },
            //解绑
            unBundOperation(id){
                var that=this;
                that.$confirm('确定要解绑吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    that.$api.post('channel/message/unbundling', {"id": id,storeId:this.storeId}, res => {
                        if (res.code == 1) {
                            that.dialogVisible=false;
                            that.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 500,
                                onClose: () => {
                                    that.getBundList()
                                },
                            })
                        } else {
                            that.$message.error(res.msg);
                            that.getBundList()
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消解绑'
                    });
                });


            },
            //添加绑定
            onSubmit(){
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.storeId=this.storeId;
                        const {msg} = await addBund(this.form);
                        this.$baseMessage(msg, "success");
                        this.getBundList();

                    } else {
                        return false;
                    }
                });
                this.dialogFormVisible=false;
            },
        }
    }
</script>
<style lang="scss" scoped>
    .color-1989FA{
        color:#1989Fa
    }
    .hr {
        margin: 0 auto;
        width: 300px;
        border-top: 2px solid #dcdfe6;
    }

    .hrtext {
        top: -8px;
        left: 50%;
        margin-left: -90px;
        width: 180px;
    }

    .step {
        width: 140px;
    }

    .mar_t60 {
        margin-top: 60px;
    }

    .icon {
        width: 40px;
        height: 40px;
    }
</style>
